<template>
    <div class="header">
        <div class="header-left">
            <div class="iconfont back-icon">&#xe624;</div>
        </div>
        <div class="header-input" >
            <span class="iconfont">&#xe632;</span>
            输入城市/景点/主题
        </div>
        <router-link to="/city">
            <div class="header-right">
                {{this.city}}
                <!--{{this.doubleCity}}-->
                <span class="iconfont arrow-icon">&#xe6aa;</span>
            </div>
        </router-link>
    </div>
</template>

<script>
    import {mapState,mapGetters} from 'vuex';
    export default {
        name: "HomeHeader",
        // 把vuex里面的数据 映射到computed的一个计算属性 city中
        computed:{
            ...mapState(['city']),
            ...mapGetters(['doubleCity'])
        }
    }
</script>
<!--lang = “stylus” 用stylus写法-->
<!--scoped 样式只对当前的组件有效-->
<style lang="stylus" scoped>
    /*1rem =html的font-siz =50px*/
    /*86/100*/
    /*@import "../../../assets/styles/variables.styl"*/
    //@表示src目录 但是样式中用 要加上~
    @import "~styles/variables.styl"
    .header
        display: flex
        height: $headerHeight
        line-height:$headerHeight
        background:$bgcolor
        color:#fff
    .header-left
        width: 0.64rem
        float: left
        .back-icon
            text-align: center
            font-size 0.4rem
    .header-input
        flex:1
        margin-top 0.12rem
        height:0.64rem
        margin-left .2rem
        background #ffffff
        -webkit-border-radius: 5px
        -moz-border-radius: 5px
        border-radius: 5px
        color: #ccc
        line-height:0.64rem
        padding-left:0.2rem
    .header-right
        min-width: 1.04rem
        padding:0 0.1rem
        float: right
        text-align center
        color: #fff
        .arrow-icon
            margin-left:-0.04rem
            font-size:0.32rem
</style>